<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <style>
      .bigimg img {
        display: none;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 5px;
      }
      .bigimg .active {
        display: block;
      }
      main {
        width: 220px;
        height: 255px;
      }
      .bigimg {
        width: 150px;
      }
      .smallimg {
        float: left;
        margin-top: 5px;
        margin-left: 5px;
        border-radius: 5px;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="bigimg">
        <img class="active" src="images/big_1.jpg" alt="" />
        <img src="images/big_2.jpg" alt="" />
        <img src="images/big_3.jpg" alt="" />
        <img src="images/big_4.jpg" alt="" />
        <img src="images/big_5.jpg" alt="" />
        <img src="images/big_6.jpg" alt="" />
        <img src="images/big_7.jpg" alt="" />
        <img src="images/big_8.jpg" alt="" />
        <img src="images/big_9.jpg" alt="" />
        <img src="images/big_10.jpg" alt="" />
        <img src="images/big_11.jpg" alt="" />
      </div>

      <img class="smallimg" src="images/small_1.jpg" alt="" />
      <img class="smallimg" src="images/small_2.jpg" alt="" />
      <img class="smallimg" src="images/small_3.jpg" alt="" />
      <img class="smallimg" src="images/small_4.jpg" alt="" />
      <img class="smallimg" src="images/small_5.jpg" alt="" />
      <img class="smallimg" src="images/small_6.jpg" alt="" />
      <img class="smallimg" src="images/small_7.jpg" alt="" />
      <img class="smallimg" src="images/small_8.jpg" alt="" />
      <img class="smallimg" src="images/small_9.jpg" alt="" />
      <img class="smallimg" src="images/small_10.jpg" alt="" />
      <img class="smallimg" src="images/small_11.jpg" alt="" />
      <div class="clear"></div>
    </main>
    <script>
      var bigimg = document.querySelectorAll(".bigimg img");
      var smallimg = document.querySelectorAll(".smallimg");
      var index = 0;
      var lastindex = index;

      for (var i = 0; i < smallimg.length; i++) {
        smallimg[i].index = i;
        // console.log(block[i]);
        smallimg[i].onmouseenter = function() {
          index = this.index;
          show();
        };
      }
      function show() {
        bigimg[lastindex].classList.remove("active");
        bigimg[index].classList.add("active");
        lastindex = index;
      }
    </script>
    <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
  </body>
</html>
